<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        p.none {
            border-style: none;
        }

        p.dotted {
            border-style: dotted;
        }

        p.dashed {
            border-style: dashed;
        }

        p.solid {
            border-style: solid;
        }

        p.double {
            border-style: double;
        }

        p.groove {
            border-style: groove;
        }

        p.ridge {
            border-style: ridge;
        }

        p.inset {
            border-style: inset;
        }

        p.outset {
            border-style: outset;
        }

        p.hidden {
            border-style: hidden;
        }

        p.one {
            border-style: solid;
            border-width: 5px;
        }

        p.two {
            border-style: solid;
            border-width: medium;
        }

        p.three {
            border-style: solid;
            border-width: 1px;
        }

        p.red {
            border-style: solid;
            border-color: red;
        }

        p.green {
            border-style: solid;
            border-color: #98bf21;
        }
        p.diffBorder
        {
            border-top-style:dotted;
            border-right-style:solid;
            border-bottom-style:dotted;
            border-left-style:solid;
        }
        p.oneColor
        {
            border-style:solid;
            border-color:#0000ff;
        }
        p.twoColor
        {
            border-style:solid;
            border-color:#ff0000 #0000ff;
        }
        p.threeColor
        {
            border-style:solid;
            border-color:#ff0000 #00ff00 #0000ff;
        }
        p.fourColor
        {
            border-style:solid;
            border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
        }
    </style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="one">一些文本，边框width：5px。</p>
<p class="two">一些文本，边框width：medium。</p>
<p class="three">一些文本，边框width：1px。</p>
<p class="red">实线红色边框</p>
<p class="green">实线绿色边框</p>
<p class="diffBorder">两个不同的边界样式。</p>
<p class="oneColor">One-colored border!</p>
<p class="twoColor">Two-colored border!</p>
<p class="threeColor">Three-colored border!</p>
<p class="fourColor">Four-colored border!</p>
<p><b>注意:</b> "border-width"之类的属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>